<template>
  <div class="content_main">
    <div class="main_box">


      <div class="tip">
        <p class="active_sm">奖池实时数据: </p>


        <el-row>
          <el-col :span="4">
            <span class="lab_text">A5大奖：</span><el-tag type="danger">{{ recodeNum.recode.a }}</el-tag>
          </el-col>

          <el-col :span="4">
            <span class="lab_text">A5升级券：</span><el-tag type="warning">{{ recodeNum.recode.b }}</el-tag>
          </el-col>

          <el-col :span="4">
            <span class="lab_text">100元体验券：</span><el-tag>{{ recodeNum.recode.c }}</el-tag>
          </el-col>

          <el-col :span="4">
            <span class="lab_text">50元体验券：</span><el-tag>{{ recodeNum.recode.d }}</el-tag>
          </el-col>

          <el-col :span="4">
            <span class="lab_text">20元体验券：</span><el-tag>{{ recodeNum.recode.e }}</el-tag>
          </el-col>

          <el-col :span="4">
            <span class="lab_text">红包奖：</span><el-tag type="success">{{ recodeNum.recode.f }}</el-tag>
          </el-col>

        </el-row>

      </div>


      <el-row style="margin-top: 20px;margin-bottom: 20px;">
        <span class="download_xlxs" @click="exportTable()">导出中奖记录</span>

      </el-row>

      <div>
        <el-table
          ref="recodeData"
          :data="recodeData"
          :header-cell-style="{
            'background-color': '#fafafa',
            'color': 'rgb(35, 35, 35)',
            'border-bottom': '1px #409EFF solid'
          }"
          :row-style = "{
            'color': '#696969',
          }"
          style="width: 100%; margin-top: 10px; font-size: 13px;"
        >
          <el-table-column
            fixed
            prop="id"
            label="中奖ID"
            width="60"/>


          <el-table-column
            prop="user.avatarUrl"
            label="用户头像"
            width="160">
            <template slot-scope="scope">
              <img :src="scope.row.user ? scope.row.user.avatarUrl : 0" class="list_item_img" alt="">
              <span style="line-height: 45px;margin-left: 20px;">{{ scope.row.user.name ? scope.row.user.name : '' }}</span>
            </template>

          </el-table-column>


          <el-table-column
            prop="user.avatarUrl"
            label="用户手机号"
            width="100">
            <template slot-scope="scope">
              <p>{{ scope.row.user ? scope.row.user.phone : '' }}</p>
            </template>

          </el-table-column>

          <el-table-column
          prop="content"
          label="中奖记录"
          width="220">
          </el-table-column>

          <el-table-column
            prop=""
            label="中奖时间"
          >
            <template slot-scope="scope">
              <p>{{ parseTime(scope.row.create_time) }}</p>
            </template>

          </el-table-column>




        </el-table>

        <div class="m_pagination" style="margin-top: 10px;margin-bottom: 40px;">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10]"
            :page-size="10"
            :total="recodeTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>

      </div>


    </div>

  </div>
</template>

<script>
  import t from './../../utils/request'
  import { parseTime } from './../../utils/index'
  import $ from 'jquery'

  export default {
    name: 'Login',
    components: {
    },
    data() {
      return {
        recodeData: [],
        currentPage: 1,
        recodeTotal: 0,
        recodeNum: null
      }
    },
    mounted() {
      this.renderList();
      t.toPost('/admin/active/info', {}, (res)=> {
        this.recodeNum = res.data
      })
    },
    created() {
      // window.addEventListener('hashchange', this.afterQRScan)
    },
    destroyed() {

    },
    methods: {

      renderList() {
        t.toPost('/admin/recode/list', {
          page: this.currentPage,
          num: 10
        }, (res) => {
          console.log(res)
          this.recodeData = res.data.data
          this.recodeTotal = res.data.total
        })
      },

      parseTime(time) {
        return parseTime(time)
      },

      handleSizeChange(val) {

      },

      handleCurrentChange(val) {
        t.toPost('/admin/recode/list', {
          page: val,
          num: 10
        }, (res) => {
          this.recodeData = res.data.data
          this.recodeTotal = res.data.total
        })
      },

      exportTable() {
        var url = 'https://market.jackgroup.cn/index.php/admin/recode/export';
        var form=$("<form>");//定义一个form表单
        form.attr("style","display:none");
        form.attr("target","");
        form.attr("method","post");//请求类型
        form.attr("action",url);//请求地址
        $("body").append(form);//将表单放置在web中

        form.submit();//表单提交
      }
    }
  }
</script>

<style scoped>
  .content_main {
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: #f1f4f5;
  }
  .main_box {
    position: relative;
    top: 10px;
    width: calc(100% - 30px);
    min-height: 850px;
    background-color: #ffffff;
    margin: 0px auto;
    padding: 20px;
  }
  .list_item_img {
    position: relative;
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 3px;
  }
  .download_xlxs {
    font-size:14px;
    color: #409eff;
    margin-top:10px;
  }

  .download_xlxs:hover {
    border-bottom: 1px solid #409eff;
    cursor: pointer;
  }

  .tip {
    padding: 18px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
  }

  .lab_text {
    font-size: 14px;
    color: #323232;
  }

  .active_sm {
    position: relative;
    color: #333333;
    font-weight: 600;
  }
</style>
